<template>
  <div class="search-area">
    <div
      class="search"
      ref="search">
      <input
        type="text"
        v-model="content"
        @input="searchMusic()" />
      <span
        @mousedown.prevent="closeSearch"
        class="iconfont"
        >&#xeb6a;</span
      >
    </div>

    <div
      class="right"
      @click="showSearch">
      <span class="iconfont">&#xeafe;</span>
      <span> 搜索</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getTheme } from '../utils/util';
import _ from 'lodash';
const searchColor = getTheme().get('searchBg');
const color = getTheme().get('fontColor');

//搜索结果回传
const emits = defineEmits<{
  (e: 'getContent', param: string): void;
}>();

//搜索容器
const search = ref<HTMLDivElement>();

//搜索内容
const content = ref<string>('');
const searchMusic = () => {
  _.debounce(
    () => {
      emits('getContent', content.value);
    },
    800,
    {
      leading: true,
      trailing: false,
    }
  )();
};

//展示搜索框
const showSearch = () => {
  search.value!.style.zIndex = '3';
  search.value!.style.height = '34px';
  search.value!.style.width = '180px';
};

//关闭搜索框
const closeSearch = () => {
  search.value!.style.zIndex = '-1';
  search.value!.style.height = '34px';
  search.value!.style.width = '0';
  content.value = '';
};
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@search-bg: v-bind(searchColor);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.search-area {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 180px;
  .right {
    height: 30px;
    display: flex;
    align-items: center;
    position: absolute;
    border: 0px;
    font-size: 13px;
    cursor: pointer;
    span {
      color: @font-color;
    }
    &:hover {
      background-color: @search-bg;
    }
    padding: 0 5px;
    .iconfont {
      font-size: 18px;
      margin-right: 5px;
    }
  }
  .search {
    position: relative;
    z-index: -1;
    width: 0px;
    height: 38px;
    transition: 0.5s;
    border-radius: 19px;
    input {
      width: 100%;
      height: 100%;
      border-radius: 19px;
      border: none;
      outline: none;
      font-size: 13px;
      padding-left: 20px;
      background-color: @search-bg;
      color: @font-color;
      border: 2px solid #ffffff;
    }
    .iconfont {
      position: absolute;
      right: 10px;
      top: 8px;
      font-size: 10px;
      cursor: pointer;
      color: @font-color-gray;
      &:hover {
        color: @font-color-green;
      }
    }
  }
}
</style>
